<template>
	<view class="bottom">
		<!-- 外观模式 -->
		<view class="content flex" v-if="!isFoucs">
			<view class="text">
				<u--input
				    placeholder="说点什么吧!"
				    border="surround"
				    v-model="text"
					shape="circle"
					:prefixIcon="text == ''? 'edit-pen' : ''"
					:prefixIconStyle="{
						fontSize: '40rpx',
						color: '#a8a8a8'
					}"
					:customStyle="{
						border: '1rpx solid #a8a8a8',
						backgroundColor: '#f9f9f9'
					}"
					@focus="$emit('foucs', true)"
				  ></u--input>
			</view>
			<view class="like flex">
				<u-icon :name="isLike?'heart-fill' : 'heart'" 
					:color="isLike? 'red' : '#a8a8a8'" 
					size="50"
					@click="toLike()"
				></u-icon>
				<view class="text">{{likeNum}}</view>
			</view>
			<view class="attention flex">
				<u-icon :name="isCollect?'star-fill' : 'star'" 
						:color="isCollect? 'red' : '#a8a8a8'" 
					size="50"
					@click="dealCollect()"
				></u-icon>
				<view class="text">{{collectNum}}</view>
			</view>
			<view class="comment flex">
				<u-icon name="more-circle" color="#a8a8a8" 
					size="50"
				></u-icon>
				<view class="text">{{commentNum}}</view>
			</view>
		</view>
		<!-- 输入模式 -->
		<view class="content flex" v-else>
			<view class="textarea"
				:style="{
					width: text == ''? '700rpx' : '580rpx'
				}"
			>
				<u--textarea v-model="text" placeholder="喜欢就留下您的评论吧!"
					border="sround"
					autoHeight
					:maxlength="290"
					:focus="isFoucs"
					shape="circle"
				></u--textarea>
			</view>
			<view v-if="text != ''" class="btn flex justify-center align-center"
				
			>
				<u-button type="primary" text="发送"
					shape="circle"
					:customStyle="{
						height: '70rpx'
					}"
					@click="$emit('submit', text)"
				></u-button>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="mask" v-if="isFoucs" @click="$emit('foucs', false)"></view>
		<view class="blank"></view>
		
		<!-- 弹窗 -->
		<u-modal :show="modalShow" title="是否取消对该文章收藏?" 
			:showCancelButton="true"
			cancelColor="red"
			@cancel="modalShow = false"
			@confirm="toCollect()"
		></u-modal>
	</view>
</template>

<script>
	import {
		toLike,
		toCollect
	} from "@/api/article.js";
	
	export default {
		name: 'bootomArea',
		props: {
			isFoucs: {
				type: Boolean,
				required: true,
				default: false
			},
			commentNum: {
				type: Number,
				default: 0
			},
			likeNum: {
				type: Number,
				default: 0
			},
			isLike: {
				type: Boolean,
				default: false
			},
			collectNum: {
				type: Number,
				default: 0
			},
			isCollect: {
				type: Boolean,
				default: false
			},
			articleId: {
				type: String,
				default: '-1'
			}
		},
		data() {
			return {
				text: '',
				modalShow: false
			}
		},
		methods: {
			clear() {
				this.text = ""
			},
			toLike() {
				toLike({
					articleId: this.articleId,
					isLike: !this.isLike
				}).then(res => {
					let str = !this.isLike? "" : "取消";
					this.$msg(str + "点赞成功！");
					this.$emit("update:isLike", !this.isLike);
					let num = !this.isLike? this.likeNum + 1 : this.likeNum - 1;
					this.$emit("update:likeNum", num);
					
				}).catch(err => this.$msg(err.message));
			},
			// 处理收藏
			dealCollect() {
				// 取消操作
				if(this.isCollect) this.modalShow = true;
				else this.toCollect();
			},
			toCollect() {
				toCollect({
					articleId: this.articleId,
					isCollect: !this.isCollect
				}).then(res => {
					let str = !this.isCollect? "" : "取消";
					this.$msg(str + "收藏成功！");
					this.$emit("update:isCollect", !this.isCollect);
					let num = !this.isCollect? this.collectNum + 1 : this.collectNum - 1;
					this.$emit("update:collectNum", num);
					this.modalShow = false;
				}).catch(err => this.$msg(err.message));
			}
		}
	}
</script>

<style lang="scss" scoped>
.bottom{
	.content{
		position: fixed;
		bottom: 0;
		width: 100vw;
		box-shadow: 0 0 6rpx rgba(#d1d1d1, .5);
		padding: 10rpx;
		background-color: white;
		z-index: 999;
		.text{
			width: 300rpx;
			height: 80rpx;
			// background-color: red;
		}
		.like, .attention, .comment{
			margin-left: 10rpx;
			max-width: 150rpx;
			overflow: hidden;
			.text{
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				line-height: 80rpx;
			}
		}
		.textarea{
			padding: 10rpx;
			border: 1rpx solid #a8a8a8;
			border-radius: 30rpx;
			font-size: 100rpx;
		}
		.btn{
			height: 70rpx;
			padding: 10rpx;
		}
	}
	.mask{
		width: 100vw;
		height: 100vh;
		background-color: rgba(#000, .12);
		position: fixed;
		top: 0;
	}
	.blank{
		position: relative;
		bottom: 0;
		width: 100vw;
		height: 80rpx;
		z-index: -1;
		// background-color: blue;
	}
}	
</style>